<template>
	<view class="container">
		<top-back-navbar position="fixed" title="个人资料" background="#6A41EA" color="#ffff"></top-back-navbar>
		<view class="avatar">
			<image :src="src||avatar" @click="jump" data-src="face/face"></image>
		</view>
		<view class="content">
			<view class="content_box">
				<view class="webkit list angle mt" @click="jump" data-src="face/face">
					<view class="title">昵称</view>
					<view class="right">{{nickname||nickname1}}</view>
				</view>
				<view class="webkit list mt bb">
					<view class="title">姓名</view>
					<input placeholder="请输入" type="text" :value="realname" @blur="realnameIpt" class="flex" />
				</view>
				<view class="submit_btn" @click="submit">
				
				</view>
			</view>
			<view style="padding: 80rpx 30rpx;" class="u-f-ajc">
				<button type="primary" style="background-color: #6A41EA; width:100%;border-radius: 60rpx;" @click="submit"
          :loading="loading">保存</button>
			</view>
		</view>

	  <cxsytabbars :current="3"></cxsytabbars>

		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength"
			:pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" @onCancel="onCancel"
			:pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			@onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>

	</view>
</template>

<script>
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '../../../common/city.data.js';
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				nickname1: '游客',
				avatar: '../../../static/missing-face.png',
				res: [],
				date: currentDate,
				src: '',
				nickname: '',
				mobile: "",
				paypwd: "",
				realname: "",
				weixin: '',
				idcard: '',
				mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray: [],
				data: [],
				birthyear: '',
				birthmonth: '',
				birthday: '',
				province: '',
				city: '',
				datavalue: '',
				openid: "",
				marginTops: uni.upx2px(110),
				loading:false
			};
		},
		computed: {
			startDate() {
				return this.getDate('start')
			},
			endDate() {
				return this.getDate('end')
			}
		},
		onShow: function() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					console.log(res.statusBarHeight);
					// if (res.statusBarHeight) that.marginTops = res.statusBarHeight + uni.upx2px(110)
					if (res.statusBarHeight) that.marginTops = uni.upx2px(110)
				}
			});
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},
		methods: {
			setAjax() {
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.info&app=1',
					method: 'POST',
					data: {
						'openid': this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						uni.hideLoading()
						this.res = res.data
						this.date = res.data.member.birthday
						this.src = res.data.member.avatar
						this.nickname = res.data.member.nickname
						this.mobile = res.data.member.mobile
						this.paypwd = res.data.member.paypwd
						this.realname = res.data.member.realname
						this.weixin = res.data.member.weixin
						this.idcard = res.data.member.idcard
						var time = res.data.member.birthday
						time = time.split('-')
						this.birthyear = time[0]
						this.birthmonth = time[1]
						this.birthday = time[2]
						this.datavalue = res.data.member.datavalue
						if (res.data.member.datavalue != '') {
							this.pickerText = res.data.member.province + '-' + res.data.member.city
						}
						this.province = res.data.member.province
						this.city = res.data.member.city
					},
					fail: () => {},
					complete: () => {}
				});
			},
			realnameIpt(e) {
				this.realname = e.detail.value
			},
			weixinIpt(e) {
				this.weixin = e.detail.value
			},
			idcardIpt(e) {
				this.idcard = e.detail.value
			},
			onCancel(e) {},
			showMulLinkageTwoPicker() {
				this.pickerValueArray = this.mulLinkageTwoPicker
				this.mode = 'multiLinkageSelector'
				this.deepLength = 2
				this.pickerValueDefault = [0, 0]
				this.$refs.mpvuePicker.show()
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				var time = e.target.value
				time = time.split('-')
				this.birthyear = time[0]
				this.birthmonth = time[1]
				this.birthday = time[2]
			},
			jump(e) {
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			onConfirm(e) {
				this.pickerText = e.label
				var label = e.label
				label = label.split('-')
				this.datavalue = e.value[0] + ' ' + e.value[1]
				this.province = label[0]
				this.city = label[1]
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			submit() {
				uni.showLoading()
				var data = {
					'openid': this.openid,
					'memberdata[realname]': this.realname,
					'memberdata[weixin]': this.weixin,
					'memberdata[idcard]': this.idcard,
					'memberdata[birthyear]': this.birthyear,
					'memberdata[birthmonth]': this.birthmonth,
					'memberdata[birthday]': this.birthday,
					'memberdata[province]': this.province,
					'memberdata[city]': this.city,
					'memberdata[datavalue]': this.datavalue,
					'mcdata[realname]': this.realname,
					'mcdata[birthyear]': this.birthyear,
					'mcdata[birthmonth]': this.birthmonth,
					'mcdata[birthday]': this.birthday,
					'mcdata[resideprovince]': this.province,
					'mcdata[residecity]': this.city
				}
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.info.submit&app=1',
					method: 'POST',
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						uni.hideLoading()
						if (res.data.status == 1) {
							uni.showToast({
								title: '修改成功'
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 300)
						} else {
							uni.showToast({
								title: res.data.result.message,
								icon: "none"
							});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f2f5fa;
	}

	.container {
		;
	}

	.avatar {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		image {
			border: 1px solid #4a4a4a;
			background-color: #fff;
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
		}
	}

	.content {
		padding: 30rpx;
		.content_box {
			background-color: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);
			padding:0 30rpx;
		}
	}

	.list {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		border-bottom:1px solid #eee;
		view {
			font-size: 28rpx !important;
			// font-weight: 700;
		}

		input {
			text-align: right;
			font-size: 28rpx !important;
			// font-weight: 700 !important;
		}
	}

	.angle {
		position: relative;
	}

	// .angle:after {
	//   content: " ";
	//   display: inline-block;
	//   -webkit-transform: rotate(45deg);
	//   -ms-transform: rotate(45deg);
	//   transform: rotate(45deg);
	//   height: 16upx;
	//   width: 16upx;
	//   border-width: 2upx 2upx 0 0;
	//   border-color: #b2b2b2;
	//   border-style: solid;
	//   position: absolute;
	//   top: 50%;
	//   right: 30upx;
	//   margin-top: -8upx;
	//   box-sizing: border-box;
	// }

	.list .title {
		width: 130upx;
		line-height: 50upx;
	}

	.list .flex {
		line-height: 50upx;
		padding-left: 24upx;
	}

	.list .right {
		color: #979797;
	}

	.cityp {
		text-align: left;
		font-size: 28upx;
		background: transparent;
	}

	.cityp:after {
		display: none;
	}

	.bb {
		position: relative;
	}

	.bb:before {
		content: " ";
		position: absolute;
		left: 20upx;
		right: 20upx;
		bottom: -2upx;
		height: 2upx;
		// border-top: 1px solid #ebebeb;
		color: #D9D9D9;
		-webkit-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleY(0.5);
		-ms-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.layout {
		margin-top: 20upx;
	}
</style>
